<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { invoke } from '@tauri-apps/api/tauri';
import { ElMessage } from 'element-plus';

// import { useContext } from "vue";
// const ctx = useContext();
// ctx.emit("closeDialog");
const emits = defineEmits(["closeDialog"]);
const form = reactive({
    id: null,
    name: null,
    host: null,
    port: 5432,
    username: null,
    password: null,
    database: null,
    schema: null
});

const formRules = reactive({
    name: [
        { required: true, message: "请输入连接名称", trigger: 'blur' },
    ],
    host: [
        { required: true, message: "请输入主机地址", trigger: 'blur' },
    ],
    username: [
        { required: true, message: "请输入登录的用户名", trigger: 'blur' },
    ],
    password: [
        { required: true, message: "请输入登录的密码", trigger: 'blur' },
    ],
    database: [
        { required: true, message: "请输入默认数据库", trigger: 'blur' },
    ],
});

// const container: any = ref(null);
const editform: any = ref(null);

const closeDialog = () => {
    // console.log(container.value.$parent.value);
    // container.value.$parent.closeDialog();
    emits("closeDialog");
}

// ElMessage('this is a message.')
// ElMessage({
//     message: 'Warning, this is a warning message.',
//     type: 'warning',
//   })
const testConnection = () => {
    editform.value.validate((valid: boolean, _) => {
        if (!valid) {
            return;
        }
        invoke("pgsql_test_connection", { host: form.host, port: form.port.toString(), username: form.username, password: form.password, database: form.database }).then(() => {
            ElMessage({
                message: "连接成功",
                type: "success",
            });
        }).catch((err) => {
            console.error(err);
            ElMessage.error("连接失败");
        })
    });
}

const setConnection = (dataId: String) => {
    if (dataId == null) {
        return;
    }
    invoke("get_connection", { id: dataId }).then((resdata: any) => {
        form.id = resdata.id;
        form.name = resdata.name;
        form.host = resdata.host;
        form.port = resdata.port;
        form.username = resdata.username;
        form.password = resdata.password;
        form.database = resdata.database;
    }).catch((err) => {
        console.error(err);
    })
}

const saveConnection = () => {
    editform.value.validate((valid: boolean, _) => {
        if (!valid) {
            return;
        }
        let data = {
            id: form.id,
            name: form.name,
            host: form.host,
            port: form.port,
            username: form.username,
            password: form.password,
            database: form.database
        };
        invoke("save_connection", { data: data }).then((_msg) => {
            ElMessage({
                message: "保存成功",
                type: "success",
            });
            closeDialog();
        }).catch((msg) => {
            console.error(msg);
            ElMessage.error("保存失败");
        });
    });
}

defineExpose({ setConnection });
</script>

<template>
    <el-container>
        <el-header height="36px" style="background-color: #EFEFEF;padding:6px 0px 0px 5px;">
            <el-button size="small" type="primary" @click="saveConnection">保存</el-button>
            <el-button size="small" type="primary" @click="testConnection">测试连接</el-button>
            <el-button size="small" type="danger" @click="closeDialog">关闭</el-button>
        </el-header>
        <el-main>
            <el-form ref="editform" :model="form" :rules="formRules" label-width="90px" size="small">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="主机" prop="host">
                    <el-input v-model="form.host" />
                </el-form-item>
                <el-form-item label="端口">
                    <el-input-number v-model="form.port" :min="1" :max="65535" />
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" type="password" show-password />
                </el-form-item>
                <el-form-item label="默认数据库" prop="database">
                    <el-input v-model="form.database" />
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>